<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON配置生成器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="sticky-header mb-4">
            <h1 class="mb-3">JSON配置生成器</h1>
        </div>
        
        <div class="row">
            <!-- 左侧：基本配置 -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <h5>基本配置</h5>
                    </div>
                    <div class="card-body config-section">
                        <form id="configForm">
                            <div class="mb-3">
                                <label for="classType" class="form-label">类型 (classType)</label>
                                <select class="form-select" id="classType" required>
                                    <option value="" disabled selected>请选择类型</option>
                                    <!-- 将通过API动态填充 -->
                                    <option value="0">UITabelView</option>
                                    <option value="1">UICollectionView</option>
                                    <option value="2">UIView</option>
                                    <option value="3">UIViewController</option>
                                    <option value="4">CATBaseTipView</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="module" class="form-label">模块 (module)</label>
                                <input type="text" class="form-control" id="module" value="Login" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="prefix" class="form-label">前缀 (prefix)</label>
                                <input type="text" class="form-control" id="prefix" value="CAT" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="classDesc" class="form-label">描述 (classDesc)</label>
                                <input type="text" class="form-control" id="classDesc" value="登录页" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="fileName" class="form-label">文件名</label>
                                <input type="text" class="form-control" id="fileName" value="Test" required>
                            </div>
                            
                            <div class="result-area" id="resultArea" style="display: none;">
                                <div class="alert alert-success" id="resultMessage"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 中间：子视图配置 -->
            <div class="col-md-5">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">子视图配置</h5>
                        <span class="badge bg-success d-none" id="globalSaveMessage">已保存</span>
                        <button class="btn btn-sm btn-primary" id="addSubview">添加子视图</button>
                    </div>
                    <div class="card-body subviews-section">
                        <div id="subviewsContainer">
                            <!-- 子视图将在这里动态添加 -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧：JSON预览 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>JSON预览</h5>
                        <button class="btn btn-sm btn-primary" id="downloadJson">下载JSON</button>
                        <button id="generateSwift" class="btn btn-primary">生成Swift代码</button>
                    </div>
                    <div class="card-body p-0">
                        <pre class="json-preview" id="jsonPreview"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 子视图模板 -->
    <template id="subviewTemplate">
        <div class="subview-item">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6>子视图</h6>
                <span class="badge bg-success d-none">已保存</span>
                <button class="btn btn-sm btn-danger remove-subview">删除</button>
            </div>
            
            <div class="mb-3">
                <label class="form-label">视图类型</label>
                <select class="form-select view-type">
                    <!-- 将通过API动态填充 -->
                </select>
            </div>
            
            <div class="mb-3">
                <label class="form-label">描述</label>
                <input type="text" class="form-control view-desc" value="">
            </div>
            
            <!-- 属性配置（可折叠） -->
            <div class="mb-3">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label mb-0">属性配置</label>
                    <button class="btn btn-sm btn-outline-secondary toggle-properties" type="button" data-bs-toggle="collapse" data-bs-target="">
                        显示
                    </button>
                </div>
                <div class="collapse properties-container">
                    <div class="card card-body">
                        <!-- 通用属性 -->
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <label class="form-label">背景颜色</label>
                                <input type="text" class="form-control prop-backgroundColor" value="" placeholder="#ffffff">
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label">透明度</label>
                                <input type="range" class="form-range prop-alpha" min="0" max="1" step="0.1" value="1.0">
                                <span class="alpha-value">1.0</span>
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input prop-isHidden" type="checkbox" value="">
                                    <label class="form-check-label">隐藏</label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input prop-clipsToBounds" type="checkbox">
                                    <label class="form-check-label">裁剪子视图</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <label class="form-label">标签值</label>
                                <input type="number" class="form-control prop-tag" value="0">
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input prop-isUserInteractionEnabled" type="checkbox" checked>
                                    <label class="form-check-label">允许用户交互</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <label class="form-label">圆角半径</label>
                                <input type="number" class="form-control prop-cornerRadius" value="0">
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label">边框宽度</label>
                                <input type="number" class="form-control prop-borderWidth" value="0">
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <label class="form-label">边框颜色</label>
                                <input type="text" class="form-control prop-borderColor" value="" placeholder="rgba(0, 0, 0, 1)">
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label">内容模式</label>
                                <select class="form-select prop-contentMode">
                                    <option value="scaleAspectFit">等比例适应</option>
                                    <option value="scaleAspectFill">等比例填充</option>
                                    <option value="scaleToFill">拉伸填充</option>
                                    <option value="center">居中</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- 特定视图类型的属性 -->
                        <div class="specific-props">
                            <!-- UILabel特有属性 -->
                            <div class="label-props d-none">
                                <hr>
                                <h6>标签特有属性</h6>
                                <div class="row mb-2">
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">文本内容</label>
                                        <input type="text" class="form-control prop-text" value="标签">
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">文本颜色</label>
                                        <input type="text" class="form-control prop-textColor" value="rgba(0, 0, 0, 1)" placeholder="例如: rgba(0, 0, 0, 1)">
                                    </div>
                                </div>
                                
                                <div class="row mb-2">
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">字体大小</label>
                                        <input type="number" class="form-control prop-fontSize" value="16">
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">字体粗细</label>
                                        <select class="form-select prop-fontWeight">
                                            <option value="regular">常规</option>
                                            <option value="medium">中等</option>
                                            <option value="bold">粗体</option>
                                            <option value="light">细体</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="row mb-2">
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">行数</label>
                                        <input type="number" class="form-control prop-numberOfLines" value="1">
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">对齐方式</label>
                                        <select class="form-select prop-textAlignment">
                                            <option value="left">左对齐</option>
                                            <option value="center">居中</option>
                                            <option value="right">右对齐</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- UIButton特有属性 -->
                            <div class="button-props d-none">
                                <hr>
                                <h6>按钮特有属性</h6>
                                <div class="row mb-2">
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">按钮文本</label>
                                        <input type="text" class="form-control prop-title" value="按钮">
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">文本颜色</label>
                                        <input type="text" class="form-control prop-titleColor" value="rgba(0, 0, 0, 1)" placeholder="例如: rgba(0, 0, 0, 1)">
                                    </div>
                                </div>
                                
                                <div class="row mb-2">
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">字体大小</label>
                                        <input type="number" class="form-control prop-fontSize" value="16">
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">字体粗细</label>
                                        <select class="form-select prop-fontWeight">
                                            <option value="regular">常规</option>
                                            <option value="medium" selected>中等</option>
                                            <option value="bold">粗体</option>
                                            <option value="light">细体</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="row mb-2">
                                    <div class="col-md-12 mb-2">
                                        <label class="form-label">点击事件</label>
                                        <input type="text" class="form-control prop-action" value="buttonTapped">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- UIImageView特有属性 -->
                            <div class="imageview-props d-none">
                                <hr>
                                <h6>图片视图特有属性</h6>
                                <div class="row mb-2">
                                    <div class="col-md-12 mb-2">
                                        <label class="form-label">图片名称</label>
                                        <input type="text" class="form-control prop-image" value="">
                                        <small class="text-muted">请输入图片资源名称</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- CATBaseTipView特有属性 -->
                        <!-- 删除未使用的弹窗特有属性部分，因为在main.js中没有相关处理逻辑 -->
                        <div class="tipview-props d-none">
                            <hr>
                            <h6>弹窗特有属性</h6>
                            <div class="row mb-2">
                                <div class="col-md-6 mb-2">
                                    <label class="form-label">动画类型</label>
                                    <select class="form-select prop-animationType">
                                        <option value="bottom">底部弹出</option>
                                        <option value="center">中心弹出</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input prop-needBackground" type="checkbox" checked>
                                        <label class="form-check-label">显示背景</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-2">
                                <div class="col-md-6 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input prop-tapBackgroundToClose" type="checkbox" checked>
                                        <label class="form-check-label">点击背景关闭</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-2">
                                <div class="col-md-6 mb-2">
                                    <label class="form-label">弹窗宽度</label>
                                    <input type="number" class="form-control prop-popupWidth" value="300">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label class="form-label">弹窗高度</label>
                                    <input type="number" class="form-control prop-popupHeight" value="200">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 约束条件配置（可折叠） -->
            <div class="mb-3">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label mb-0">约束条件</label>
                    <button class="btn btn-sm btn-outline-secondary toggle-constraints" type="button" data-bs-toggle="collapse" data-bs-target="">
                        显示
                    </button>
                </div>
                <div class="collapse constraints-container">
                    <div class="card card-body">
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input constraint-top-enabled me-2">
                                    <label class="form-label mb-0">上边距</label>
                                </div>
                                <input type="number" class="form-control constraint-top" value="0">
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input constraint-leading-enabled me-2">
                                    <label class="form-label mb-0">左边距</label>
                                </div>
                                <input type="number" class="form-control constraint-leading" value="0">
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input constraint-centerX-enabled me-2">
                                    <label class="form-label mb-0">水平居中</label>
                                </div>
                                <input type="number" class="form-control constraint-centerX" value="0">
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input constraint-centerY-enabled me-2">
                                    <label class="form-label mb-0">垂直居中</label>
                                </div>
                                <input type="number" class="form-control constraint-centerY" value="0">
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input constraint-trailing-enabled me-2">
                                    <label class="form-label mb-0">右边距</label>
                                </div>
                                <input type="number" class="form-control constraint-trailing" value="0">
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input constraint-bottom-enabled me-2">
                                    <label class="form-label mb-0">下边距</label>
                                </div>
                                <input type="number" class="form-control constraint-bottom" value="0">
                            </div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input constraint-width-enabled me-2">
                                    <label class="form-label mb-0">宽度</label>
                                </div>
                                <input type="number" class="form-control constraint-width" value="0">
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input constraint-height-enabled me-2">
                                    <label class="form-label mb-0">高度</label>
                                </div>
                                <input type="number" class="form-control constraint-height" value="0">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <!-- 在页面底部添加脚本引用 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
</body>
</html>
